<template>
  <el-form :model="form" label-width="120px">
  
        <JmInput
          jmname="组名"
          v-model="form.name"
          placeholder="sad"
          type="text"
        ></JmInput> 
<JmEnum
          jmname="状态"
          v-model="form.status"
          :jv="{ 1: '是', 0: '否' }"
          jtype="3"
          br
        ></JmEnum> 
  
  <el-form-item  label="权限节点"> 
 <el-tree
      ref="tree"
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="form.rules" 
    :props="defaultProps"
    @check="handleCurrentChecked"
     
  />

  </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
 
  </el-form>
</template>
 
<script>
import JmInput from "../../../components/form/JmInput.vue";
import JmEnum from "../../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum },
  data() {
    return {
      form: {
       
        name	:1,
       
        status	:1,	
        rules:[1],
      }, 
             defaultProps : {
              children: 'childlist',
              label: 'title',
              
            },
            data:[]
       
    };
  },

  mounted() {
    this.getDataList();
  },
  methods: {
    // 配置信息列表初始化
    async getDataList() {
      try {
        const res = await this.$api.getRule(); 
       
         this.data =res.rows;

      } catch (error) {
        /*console.error(error);*/
      }
    },
    onSubmit() {
       
      const res = this.$api.addGroup(this.form);

             this.$emit("handleClose","如果需要传值，参数写在这里"); 
     
    },
   handleCurrentChecked(nodeObj, selectedObj){
  // console.log(nodeObj,selectedObj)
  this.form.rules=selectedObj.checkedKeys
  // console.log(selectedObj.checkedKeys)
  // console.log(selectedObj.checkedNodes) //这是选中的节点的key数组
  // console.log(selectedObj.checkedNodes) //这是选中的节点数组
}
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>